@charset "UTF-8";

@import "_components/reset.scss";
@import "_components/_mixin.scss";
@import "_components/iicon.scss";

/**
 * 砍价团详情页
 * 
 * @author babel
 * @mail e23jiang@sina.com
 * @CreateDate 2016/1/2
 * 
 */

$rem:1rem/32;

@import "group.scss";

.bg__full{
	background-size:contain;
	background-repeat:no-repeat;
}

.group-detail-container{
	background:#e8e8e8;
	overflow:hidden;
	width:$rem*750;
	margin:0 auto;
}

.detail-area{
	background:#fff;
	font-size:$rem*28;
	color:#646464;
	padding:$rem*20;
	&>header{
		font-size: $rem*30;
		color:#383838;
		display: table;
		width: 100%;
	}
}
.group-desc{
	margin-bottom:$rem*20;
	padding:$rem*34 $rem*20;
}

.group-flow{
	@include clearfix();
	padding-bottom:$rem*15;
}
//参团流程
.join-step{
	.group-step{
		$color:#960000;
		&>.dot{
			&:before,
			&:after{
				background:$color;
			}	
		}
	}
}
.group-step{
	text-align:center;
	float: left;
	width:25%;
	&>.dot{
		$color:#c33;
		overflow: hidden;
		height: $rem*90;
		position: relative;
		
		&:before{
			content: '';
			height: 1px;
			width: 100%;
			position:absolute;
			background:$color;
			left: 0;
			top:50%;
			transform: translate(0,-50%);
		}
		&:after{
			content: attr(data-index);
			position:absolute;
			width: $rem*50;
			height: $rem*50;
			color: #fff;
			line-height: $rem*50;
			border-radius: 50%;
			background:$color;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		
	}
	&:first-child{
		&>.dot{
			&:before{
				left:50%;
			}	
		}
	}
	&:last-child{
		&>.dot{
			&:before{
				left: initial;
				right: 50%;
			}	
		}
	}

}

.detail-strategy-list{
	//padding-bottom:$rem*20;
	dt,dd{
		display:table;
		width:100%;
	}
	dt{
		color:#c33;
	}
	dd{
		margin-bottom: $rem*30;
		&:last-child{
			margin-bottom: 0;
		}
	}
}

.detail-rule{
	&-content{
		display: table;
		max-height: $rem*187;
		&.mask{
			position:relative;
			overflow: hidden;
			display: block;
			&:after{
				position:absolute;
				width: 100%;
				bottom:0;
				left:0;
				height: 100%;
				content: '';
				//background: -webkit-linear-gradient(top,rgba(0,0,0,0) 45%,#fff);
				background-image:url();
				width: 100%;
				height: $rem*88;
				background-size: contain;
			}
		}

	}
	&-footer{
		color:#c33;
		text-align: center;
		line-height: 2;
		display: table;
		width: 100%;
		.iicon-arrow{
			font-size:$rem*12;
			&:before{
				border-color:#c33;
				width: $rem*16;
				height: $rem*16;
			}
		}
	}

}


.tools-bar{
	&-wrapper{
		height: $rem*90;
	}
	height:$rem*90;
	width:100%;
	border-top:1px solid #dedede;
	background:#fff;
	position:fixed;
	left:0;
	bottom:0;
	// display: -webkit-box;
	// display: flex;
	// justify-content: space-between;
	.downcount-wrapper{
		//width: $rem*240;
		text-align:left;
		font-size:$rem*24;
		padding:$rem*14 $rem*20;
		line-height: 1.334;
		color:#c33;
		float: left;
		&.sccuess{
			line-height: $rem*70;
			strong{
				font-size:$rem*28;
			}
		}
		
		&.invalid{
			color:#646464;
		}
		.btn-primary {
			z-index: 99;
		}
	}
	&-inner{
		position:relative;
		width: 100%;
		height: 100%;
	}
	.btn-abs{
		position:absolute;
		top:0;
		right:0;
	}
	.btn-lg{
		width:$rem*505;
	}
	.btn-lx{
		width:$rem*400;
	}
	.btn-sm{
		width: $rem*338;
	}
	.btn-xs{
		width:$rem*192;
	}
}

.alert-dialog{
	text-align:center;
	background:#fff;
	width:$rem*540;
	border-radius:$rem*20;
	.cols-btn_2{
		overflow: hidden;
		&>.btn{
			width: 50%;
			background:#fff;
			position:relative;
			&:first-child{
				&:after{
					content: '';
					width: 1px;
					height: 80%;
					background: #dedede;
					position:absolute;
					top:50%;
					right:0;
					transform:translate(0,-50%)
				}
			}
		}
	}
	.model-content{
		display:table;
		width: 100%;
	}
	.model-dialog-hd{
		//padding:$rem*20;
		position: relative;
		.close-btn{
			position:absolute;
			right:$rem*20;
			top:$rem*20;
			color: #999;
			width: $rem*20;
			height: $rem*20;
			background-image:url();
			@extend .bg__full;
		}
	}
	.model-dialog-bd{
		display: table-row;
		.content{
			padding:$rem*30;
			padding-top:$rem*34;
			height: $rem*260;
			font-size:$rem*34;
			display: table-cell;
			vertical-align: middle;
		}
		.ellipsis{
			&>i{
				display: inline-block;	
				width: $rem*12;
				height: $rem*12;
				margin-right: $rem*6;
				background:#9B9B9B;
				border-radius:50%;
			}
		}
		h3{
			color:#D0021B;
		}
		small{
			font-size:$rem*28;
		}
	}

	.model-dialog-ft{
		.btn{
			display: block;
			border-top:1px solid #dedede;
			height: $rem*90;
			line-height: $rem*80;
			color:#c33;
		}
	}
}

//消费保障
.consume-promise{
	margin-top:$rem*20;
	padding:$rem*36 $rem*20;
	h3{
		font-size:$rem*24;
		margin-bottom: $rem*46;
		span,
		strong{
			display: inline-block;
		}
		strong{
			font-size:$rem*30;
			color:#C33;
			margin-right:$rem*5;
		}
		.pull-right{
			color:#C33;
			.iicon-arrow{
				&:before{
					width: $rem*16;
					height: $rem*16;
					border-color:#c33;
				}
				
			}
		}
	}
	.service-list{
		@include clearfix();
		span{
			display: inline-block;
		}
		&>li{
			float: left;
			width: 25%;
			text-align: center;
			font-size:$rem*24;
			color:#c33;
			.icon{
				width: $rem*76;
				height: $rem*76;
				background:#c33;
				border-radius:50%;
				display: inline-block;
				margin-bottom: $rem*12;
				background-size: contain;
				background-image:url();
			}
			&:nth-child(2){
				.icon{
					background-image:url();
				}
			}
			&:nth-child(3){
				.icon{
					background-image:url();
				}
			}
			&:nth-child(4){
				.icon{
					background-image:url();
				}
			}
		}
	}

}

//
.member-list{
	&-wrapper{
		height:$rem*124;
	}
	&-inner{
		height:$rem*124;
		line-height:$rem*124;
		position:fixed;
		left: 0;
		bottom:$rem*90;
		width: 100%;
		background:#f1f1f1;
		color:#646464;
		font-size:$rem*24;
		padding:0 $rem*20;
		display: box;
		display: -webkit-box;
		display: flex;
		align-items:center;
		ul{
			display: inline-block;
			position:relative;
			//overflow: hidden;
			display: box;
			display: -webkit-box;
			display: flex;
		    flex-wrap: nowrap;
		    //justify-content: space-around;
		    flex-grow: 1;
		}
		li{
			text-align: center;
			position:relative;
			overflow: hidden;
			&:after{
				content: ' ';
				position: absolute;
				top:50%;
				height: $rem*2;
				width: 100%;
				left:0;
				background:#DEDEDE;
			}
			&:first-child{
				&:after{
					left:50%;
				}
			}
			&:last-child{
				&:after{
					left:-50%;
				}
			}
			&.item-1of2{
				width: 50%;
			}
			&.item-1of3{
				width: 33.33333%;
			}
			&.item-1of4{
				width: 25%;
			}
			&.item-1o5{
				width: 20%;
			}
			span{
				display: inline-block;
				position:relative;
				z-index:2;
				width: $rem*68;
				height: $rem*68;
				line-height: $rem*68;
				border-radius:50%;
				margin:0 $rem*15;
				background-color:#fff;
				vertical-align: middle;
				font-size: $rem*40;
				color:#9b9b9b;
				text-align: center;
			}
			&.pic{
				span{
					background-size:contain;
					font-size:0;
				}
			}
		}
	}

}
//物流方式
.logistics-area{
	font-size:$rem*24;
	margin-bottom:$rem*10;
	&>span{
		margin-right:$rem*20;
		color:#482517;
		display: inline-block;
	}
	.logistics-icon{
		width: $rem*24;
		height: $rem*24;
		background-size:contain;
		display: inline-block;
		vertical-align: middle;
	}
	.bonded{
		.icon{
			background-image:url();
		}
	}
	.bonded-2{
		.icon{
			background-image:url();
		}
	}
	.bonded-7{
		.icon{
			background-image:url();
		}
	}
	.bonded-6{
		.icon{
			background-image:url();
		}
	}
	.bonded-4{
		.icon{
			background-image:url();
		}
	}
	.bonded-1{
		.icon{
			background-image:url();
		}
	}
	.local-return{
		color:#895128;
		.icon{
			background-image:url();
		}		
	}
}

@charset "UTF-8";

$rem:1rem/32;
.ymt-toast{
    position: fixed;
    z-index: 9999;
    top: 50%;
    left:50%;
    color:#fff;
    text-align: center;
    border-radius: $rem*4;
    padding:$rem*6 $rem*12;
    font-size:$rem*30;
    background-color: rgba(0, 0, 0, 0.58);
    transition: transform 0.25s ease-in-out;
    transform:translate(-50%,-50%) scaleY(0);
    word-break: break-all;
    &.show{
        transform:translate(-50%,-50%) scaleY(1);
    }
}